<template>
  <div id="app">
    <TopHeader ref="sidebar"></TopHeader>
    <slideNav></slideNav>
    <transition name="bounce">
      <router-view/>
    </transition>
  </div>
</template>

<script>
  import TopHeader from '@/components/header';
  import slideNav from '@/components/slider';
  export default {
    name: 'App',
    components: { TopHeader, slideNav }
  };
</script>
<style scoped>
  .bounce-enter-active {
    animation: bounce-in .5s;
  }

  .bounce-leave-active {
    animation: bounce-in .5s reverse;
  }

  @keyframes bounce-in {
    0% {
      transform: scale(0);
      opacity: 0.1;
    }
    50% {
      transform: scale(1.1);
      opacity: 0.5;
    }
    100% {
      transform: scale(1);
      opacity: 1;
    }
  }
</style>